<template>
  <div class="comment-item-comp w-full flex justify-between">
    <div class="user-avatar pr-4">
      <el-avatar :src="userAvatar" :size="60"></el-avatar>
    </div>

    <div class="comment-container flex-1">
      <div class="prose comment-content" v-html="renderedContent"></div>

      <div class="comment-opers w-full inline-flex justify-end">
        <!--        <el-button type="text" class="mx-2">-->
        <!--          <i class="el-icon-d-caret text-base text-primary-500"></i>-->
        <!--        </el-button>-->

        <el-button v-popover:reply-comment type="text" class="mx-2">
          <i class="el-icon-chat-square text-base text-primary-500"></i>
        </el-button>

        <el-popconfirm
          v-if="user.id === userId"
          title="确认删除此条评论？"
          class="inline-flex items-center cursor-pointer mx-2"
          @onConfirm="handleDeleteComment"
        >
          <i
            slot="reference"
            class="el-icon-close text-base text-primary-500"
          ></i>
        </el-popconfirm>
      </div>

      <NcCommentItem
        v-for="(commentItem, index) in replyList"
        :key="index"
        :user-id="commentItem.user_id"
        :comment-id="commentItem._id"
        :comment-content="commentItem.content"
        :user-avatar="commentItem.user_avatar"
        :user-nickname="commentItem.user_nickname"
        :comment-time="commentItem.create_time"
        class="comment-item mb-2"
      >
      </NcCommentItem>
    </div>

    <el-popover
      ref="reply-comment"
      v-model="showReplyPopover"
      :width="400"
      trigger="click"
      placement="bottom-end"
      class="z-20"
    >
      <div class="reply-content mb-4">
        <el-input
          v-model="inputContent"
          type="textarea"
          :autosize="{ minRows: 2 }"
        >
        </el-input>
      </div>

      <div class="reply-opers flex justify-end items-center">
        <div class="reply-oper oper-cancel">
          <el-button
            size="small"
            :style="{ border: 'none' }"
            @click="onCancelReply"
          >
            取消
          </el-button>
        </div>

        <div class="reply-oper oper-confirm">
          <el-button type="success" size="small" @click="onSubmitReply">
            确认
          </el-button>
        </div>
      </div>
    </el-popover>

    <NcLoginDialog ref="login" :modal="false"></NcLoginDialog>
  </div>
</template>

<script>
import { ElButton, ElPopover } from 'element-ui'
import { mapState } from 'vuex'
import uuidv1 from 'uuid/v1'
import NcLoginDialog from '@/components/login-comp/NcLoginDialog'
export default {
  name: 'NcCommentItem',
  components: { NcLoginDialog },
  props: {
    commentId: String,
    userId: String,
    userAvatar: String,
    commentContent: String,
    commentTime: String,
  },

  async fetch() {
    await this.updateCommentList()
  },

  data() {
    return {
      inputContent: '',
      replyList: [],
      showReplyPopover: false,
    }
  },

  computed: {
    ...mapState(['user']),
    renderedContent() {
      const md = require('marked')
      return md(this.commentContent)
    },
  },

  methods: {
    async updateCommentList() {
      const commentList = await this.$http.$get(
        this.$api.apps.post.comment.query.path,
        {
          params: { to_id: this.commentId },
        }
      )
      console.log({
        id: this.commentId,
        content: this.commentContent,
        children: commentList.length,
      })
      this.$set(this, 'replyList', commentList)
    },
    async onSubmitReply() {
      if (!this.inputContent) {
        return this.$message.error('你好像啥也没输入呢！')
      }
      if (!this.$store.state.user.hasLogined) {
        this.showReplyPopover = false
        this.$refs.login.handleOpen()
        return this.$message.error('登录后才可以发表评论哦~')
      }

      await this.$http.post(this.$api.apps.post.comment.add.path, {
        user_id: this.user.id,
        content: this.inputContent,
        to_id: this.commentId,
        is_document: false,
      })

      await this.updateCommentList()
      this.$message.success('回复提交成功~')
      this.inputContent = ''
      this.showReplyPopover = false
    },

    onCancelReply() {
      this.showReplyPopover = false
    },

    async handleDeleteComment() {
      console.log('on deleting comments')
      await this.$http.$get(this.$api.apps.post.comment.delete.path, {
        params: { comment_id: this.commentId },
      })
      this.$emit('update')
      console.log('refreshing page data')
      await this.$parent.$nuxt.refresh()
      this.$message.success('删除成功')
    },
  },
}
</script>

<style scoped lang="stylus">

.comment-item-comp::before
  content ''
  width 5px
  background-color #cccccc
  margin-right 10px
  margin-bottom 10px
</style>
